* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255,0,0,0);
    font-family: STHeiti,"Microsoft YaHei",SimSun,STSong,"\5b8b\4f53",Arial,Helvetica,sans-serif;
}
ul,li{
    list-style:none;
}
input {
    outline: 0;
    border: none;
}
.room{
    overflow: hidden;
}
#header {
    width: 100%;
    height: 1.75rem;
    line-height: 1.75rem;
    overflow: hidden;
    background: #fff;
    position: relative;
}
a {
    outline: none;
    text-decoration: none;
}
#header .logo {
    width: 2rem;
    height: 1.2rem;
    position: absolute;
    left: .5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#header .logo img {
    width: 100%;
    height: 100%;
    display: block;
}

#header .btn-download {
    position: absolute;
    width: 3.3rem;
    height: 1.2rem;
    line-height: 1.2rem;
    right: .5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #c39;
    border-radius: 2.5rem;
    color: #fff;
    font-size: .45rem;
    text-align: center;
}
.container {
    max-width: 100%;
    margin: 0 auto;
}
.container .video-container{
    width: 100%;
    min-height: 10.98666667rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.container .video-container .live-video {
    position: relative;
    background-color: #383838;
    height: 9.00266667rem;
    overflow: hidden;
}


@-webkit-keyframes giftLeave {
    0% {
        left: 0
    }

    to {
        left: 100%
    }
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.h5-live-player-wrapper {
    width: 100%!important;
    height: 0!important;
    padding-bottom: 56.25%!important;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.h5-live-player-wrapper .not-in-live {
    width: 100%;
    height: 100%;
    padding: 2rem 0;
    position: absolute;
    background-color: #333;
    color: #f5f5f5;
    text-align: center;
    font-size: .65rem
}

.h5-live-player-wrapper .not-in-live h2 {
    color: #c39;
    font-size: .8rem;
    font-weight: 400
}

.h5-live-player-wrapper .not-in-live p {
    padding: .75rem 0
}

.h5-live-player-wrapper .not-in-live a {
    display: block;
    width: 10.7rem;
    height: 1.75rem;
    line-height: 1.65rem;
    text-align: center;
    margin: 0 auto;
    font-size: .65rem;
    color: #c39;
    border: 1px solid #c39;
    border-radius: 1.75rem
}

.h5-live-player-wrapper .h5-live-player {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    background-image: url(https://i.h2.pdim.gs/9d0ef212ec1c94f88680e3ff4cb252fd.gif);
    background-position: center;
    background-size: 5.625rem auto;
    background-repeat: no-repeat
}


.h5-live-player-wrapper .h5-live-danmu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100
}

.h5-live-player-wrapper .h5-live-danmu .danmaku-cmt {
    white-space: nowrap;
    color: #fff!important;
    font-size: .65rem!important
}

.h5-live-player-wrapper .h5-live-ctrl {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000
}

.h5-live-player-wrapper .h5-live-ctrl:before,.h5-live-player-wrapper .h5-live-ctrl:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    z-index: 0
}

.h5-live-player-wrapper .h5-live-ctrl:before {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),color-stop(50%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 50%);
    background: linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 50%);
    top: 0
}

.h5-live-player-wrapper .h5-live-ctrl:after {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(0,0,0,0)),to(rgba(0,0,0,.2)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.2) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.2) 100%);
    bottom: 0
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-info {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    font-size: .55rem;
    color: #fff;
    line-height: 1.4;
    padding-left: .5rem;
    padding-top: .5rem;
    -webkit-transition: all .3s;
    transition: all .3s
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-info .h5-live-title {
    font-size: .65rem
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1.75rem;
    padding: 0 .25rem;
    background: rgba(0,0,0,.2);
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    z-index: 99
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-pause,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-refresh,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-danmu {
    width: 1.75rem;
    height: 1.75rem;
    overflow: hidden;
    display: block;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -10rem;
    color: rgba(0,0,0,0);
    position: relative;
    z-index: 1;
    opacity: .9
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-pause.btn-pause,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-refresh.btn-pause,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-danmu.btn-pause {
    float: left;
    background-image: url(https://i.h2.pdim.gs/127db6add1282523d7a103e81cebf7ed.png)
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-pause.btn-refresh,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-refresh.btn-refresh,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-danmu.btn-refresh {
    float: left;
    background-image: url(https://i.h2.pdim.gs/5ba3271e9567d1fc8bae83934479d324.png)
}

.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-pause.btn-danmu,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-refresh.btn-danmu,.h5-live-player-wrapper .h5-live-ctrl .h5-live-bar .btn-danmu.btn-danmu {
    float: right;
    background-image: url(https://i.h2.pdim.gs/849e1f2abaf284d8a1712243f9eeb886.png);
    background-size: 100% auto;
    background-position: 0 -1.75rem
}

.h5-live-player-wrapper .h5-live-ctrl .btn-play {
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 3rem;
    -webkit-transition: all .3s;
    transition: all .3s;
    z-index: 99;
    background-image: url(https://i.h2.pdim.gs/cecb3e331bb5d5359a2aa4788ba3c259.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -10rem;
    opacity: .8;
    color: rgba(0,0,0,0)
}

.h5-live-player-wrapper.play .h5-live-ctrl:before {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}

.h5-live-player-wrapper.play .h5-live-ctrl:after {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
}

.h5-live-player-wrapper.play .h5-live-ctrl .h5-live-info {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}

.h5-live-player-wrapper.play .h5-live-ctrl .btn-play {
    -webkit-transform: translate(-50%,-50%) scale(3,3);
    -ms-transform: translate(-50%,-50%) scale(3,3);
    transform: translate(-50%,-50%) scale(3,3);
    opacity: 0
}

.h5-live-player-wrapper.show .h5-live-ctrl:before {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.h5-live-player-wrapper.show .h5-live-ctrl:after {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.h5-live-player-wrapper.show .h5-live-ctrl .h5-live-info {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.h5-live-player-wrapper.show .h5-live-ctrl .h5-live-bar {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.h5-live-player-wrapper.hide-danmu .h5-live-danmu {
    display: none
}

.h5-live-player-wrapper.hide-danmu .h5-live-bar .btn-danmu {
    background-position: 0 0!important;
    opacity: .5!important
}

.container .video-container .owner {
    width: 100%;
    height: 2.00533333rem;
    padding: .21333333rem;
    background-color: #fff;
    border-bottom: 1px solid #e2e2e2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.container .video-container .owner .avatar {
    overflow: hidden;
    border-radius: 1.70666667rem;
    width: 1.70666667rem;
    height: 1.70666667rem
}

.container .video-container .owner .avatar .avt {
    border-radius: 1.62133333rem;
    border: .04266667rem solid #e1e1e1;
    width: 1.62133333rem;
    height: 1.62133333rem;
    background-size: 1.62133333rem;
    background-repeat: no-repeat;
    background-position: center;
    display: block
}

.container .video-container .owner .owner-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 .256rem
}

.container .video-container .owner .owner-info h2 {
    margin: 0;
    padding: 0;
    height: .93866667rem;
    line-height: .93866667rem;
    font-size: .64rem;
    color: #333;
    font-weight: 400
}

.container .video-container .owner .owner-info p {
    margin: 0;
    padding: 0;
    height: .64rem;
    line-height: .64rem;
    font-size: .42666667rem;
    color: #ababab;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.container .video-container .owner .room-info {
    width: 4.48rem;
    text-align: right
}

.container .video-container .owner .count,.container .video-container .owner .room-id {
    font-size: .42666667rem;
    color: #ababab;
    height: .81066667rem;
    line-height: .81066667rem;
    position: relative
}
.container .main-content {
    position: relative;
}

.container .tabs-cnt {
    position: relative;
    height: 1.28rem;
    line-height: 1.28rem;
    background-color: #fff;
    padding: 0 .384rem;
    -webkit-box-shadow: 0 .10666667rem .32rem #eee;
    box-shadow: 0 .10666667rem .32rem #eee;
    z-index: 1
}

.container .tabs-cnt a {
    font-size: .512rem;
    color: #000;
    margin: 0 2%;
    width: 28%;
    float: left;
    text-align: center
}

.container .tabs-cnt a span {
    height: 1.28rem;
    line-height: 1.28rem;
    text-align: center;
    display: inline-block
}

.container .tabs-cnt .active {
    color: #c39
}

.container .tabs-cnt .active span {
    position: relative
}

.container .tabs-cnt .active span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .08533333rem;
    background: #c39;
    border-radius: .04266667rem
}

.container .main-con {
    position: relative;
    background-color: #f5f5f5
}

.container .chat-con {
    height: 9.81333333rem;
    padding: .34133333rem 0 0;
    width: 100%
}

.container .chat-con ul {
    margin: 0 .42666667rem
}

.container .chat-con ul li {
    margin-bottom: .128rem
}

.container .chat-con .message {
    overflow: hidden;
    background-color: #fff;
    line-height: 1.04533333rem;
    display: inline-block;
    font-size: .46933333rem;
    padding: 0 .21333333rem;
    border-radius: .21333333rem
}

.container .chat-con .message span {
    word-break: break-all
}

.container .chat-con .message .chat-phiz,.container .chat-con .message .send-gift-icon {
    width: .896rem;
    vertical-align: middle
}

.container .chat-con .message .chat-tags {
    float: left
}

.container .chat-con .message .chat-tags .chat-tag-user-identity {
    width: 2.112rem;
    height: .66133333rem;
    line-height: .66133333rem;
    float: left;
    overflow: hidden;
    margin-top: .128rem
}

.container .chat-con .message .chat-tags .room-chat-identity-super-manager {
    background: url(https://i.h2.pdim.gs/c55e8b0ab50b0d38001c4a7ca6e3e0b0.png) no-repeat;
    background-size: 2.112rem .66133333rem
}

.container .chat-con .message .chat-tags .room-chat-identity-host {
    background: url(https://i.h2.pdim.gs/1fdc44e89cc9dd5e2aabf045639ea20f.png) no-repeat;
    background-size: 2.112rem .66133333rem
}

.container .chat-con .message .chat-tags .room-chat-identity-room-manager {
    background: url(https://i.h2.pdim.gs/c8a81ec1b34a77e341de4b3c2e7ec229.png) no-repeat;
    background-size: 2.112rem .66133333rem
}

.container .chat-con .message .chat-user-name {
    color: #c39
}

.container .chat-con .chat-send-bamboo .chat-send-bamboo-num {
    color: #c39
}

.container .chat-con .chat-send-bamboo .message i {
    position: relative;
    display: inline-block;
    width: .384rem;
    height: .61866667rem;
    top: .128rem;
    background: url(https://i.h2.pdim.gs/3b61c95a39a1311f56338f573a7c0f1c.png) no-repeat center;
    background-size: .384rem .61866667rem
}

.footer {
    width: 16rem;
    height: 2.048rem;
    background-color: #f9f9f9;
    position: fixed;
    bottom: 0;
    z-index: 1;
    -webkit-transition: all linear 100ms;
    transition: all linear 100ms;
    -webkit-box-shadow: 0 -.10666667rem .32rem #eee;
    box-shadow: 0 -.10666667rem .32rem #eee
}

.footer .comment-con {
    height: 2.048rem
}

.footer .comment-con .form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.footer .comment-con .cmt-input {
    position: relative;
    margin: 0 2.09066667rem;
    height: 1.536rem;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 1.06666667rem;
    top: .256rem
}

.footer .comment-con .cmt-input .input {
    display: block;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    position: relative;
    float: left;
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.footer .comment-con .cmt-input .input input {
    height: .85333333rem;
    line-height: .85333333rem;
    padding-left: .42666667rem;
    width: 100%;
    font-size: .59733333rem
}

.footer .comment-con .cmt-input .btn-cmt-send {
    position: relative;
    float: left;
    width: 1.92rem;
    height: 1.536rem;
    line-height: 1.536rem;
    text-align: center;
    background: 0 0;
    border: 0 none;
    border-left: 1px solid #eee
}

.footer .comment-con .cmt-input .btn-cmt-send span {
    display: block;
    font-size: .42666667rem;
    width: .768rem;
    height: .64rem;
    background: url(https://i.h2.pdim.gs/442721b2ebc7c0e78ca4d9fca76da29f.png) no-repeat center;
    background-size: 100% 100%;
    text-indent: -999rem;
    margin: .42666667rem auto
}

.footer .comment-con .cmt-input .btn-cmt-send:focus {
    outline: none
}

.footer .comment-con .cmt-input .highlighte span {
    background-image: url(https://i.h2.pdim.gs/3c97eb3004db8c2122b3d48f93dc24c8.png)
}

.footer .comment-con .cmt-phiz,.footer .comment-con .cmt-gift {
    width: 2.02666667rem;
    position: absolute;
    top: 0;
    z-index: 100
}

.footer .comment-con .cmt-phiz a,.footer .comment-con .cmt-gift a {
    display: block
}

.footer .comment-con .cmt-phiz {
    left: 0
}

.footer .comment-con .cmt-phiz .phiz-icon {
    width: 2.048rem;
    height: 2.048rem;
    background: url(https://i.h2.pdim.gs/8e15f398fa3e50f674fd62148daff526.png) no-repeat center;
    display: block;
    background-size: 100% 100%
}

.footer .comment-con .cmt-gift {
    right: 0
}

.footer .comment-con .cmt-gift .gift-icon {
    width: 2.048rem;
    height: 2.048rem;
    background: url(https://i.h2.pdim.gs/2a29a55863939fc057b588f5d40b7e39.png) no-repeat center;
    display: block;
    background-size: 100% 100%
}

.videoFullScreenTip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    display: none
}

.videoFullScreenTip p {
    position: absolute;
    text-align: center;
    font-size: 1.06666667rem;
    background: -webkit-linear-gradient(top,rgba(0,0,0,.9),rgba(0,0,0,.55));
    padding: .42666667rem;
    border-radius: .17066667rem;
    color: #fff;
    top: 50%;
    left: 50%;
    display: inline-block;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.room-chat-tips {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0
}

.chat-tag-user-level {
    width: 2.112rem;
    height: .66133333rem;
    line-height: .66133333rem;
    float: left;
    margin: .128rem .128rem 0 0
}

.chat-tag-user-level img {
    width: 100%
}

.gift-layer-con {
    background: rgba(51,51,51,.77);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all linear 100ms;
    transition: all linear 100ms;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 100
}

.gift-layer-con .my-money {
    border-bottom: 1px solid #ccc;
    padding: .32rem .768rem;
    overflow: hidden;
    white-space: nowrap
}

.gift-layer-con .my-money span {
    font-size: .59733333rem;
    color: #ccc
}

.gift-layer-con .my-money span em {
    font-style: normal
}

.gift-layer-con .my-money span .maobi-num {
    color: #ffae03
}

.gift-layer-con .my-money span .bamboo-num {
    color: #4ad433
}

.gift-layer-con .my-money .goto-charge {
    width: 3.2rem;
    height: 1.152rem;
    line-height: 1.152rem;
    float: right;
    background: #ffae01;
    color: #fff;
    font-size: .59733333rem;
    border-radius: .512rem;
    text-align: center
}

.gift-layer-con .gift-list {
    padding: .32rem .0rem
}

.gift-layer-con .gift-list ul {
    margin-left: 0rem;
    margin-top: -.29866667rem;
    width:100vw;
}

.gift-layer-con .gift-list ul li {
    float: left;
    width: 2.34666667rem;
    margin-left: 1.264rem;
    padding-top: .29866667rem
}

.gift-layer-con .gift-list ul li a {
    display: block
}

.gift-layer-con .gift-list ul li img {
    width: 100%;
    height: 2.34666667rem
}

.gift-layer-con .gift-list ul li p {
    text-align: center;
    font-size: .512rem;
    padding: .128rem 0;
    white-space: nowrap;
    overflow: hidden
}

.gift-layer-con .gift-list ul li .gift-name {
    color: #fff
}

.gift-layer-con .gift-list ul li .gift-price {
    color: #ffae01
}

.phiz-layer-con {
    position: relative;
    z-index: 999;
    background: #fff;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.phiz-layer-con .swiper-slide {
    padding: .64rem .64rem
}

.phiz-layer-con ul {
    margin-left: -.64rem;
    margin-top: -.21333333rem;
    height: 100%
}

.phiz-layer-con ul li {
    float: left;
    width: 1.92rem;
    margin-left: .61866667rem;
    margin-top: .21333333rem
}

.phiz-layer-con ul li img {
    width: 100%;
    height: 1.92rem
}

.phiz-layer-con ul li a {
    display: block
}

.phiz-layer-con ul li .undo-phiz-icon {
    height: 1.92rem;
    background: url(https://i.h2.pdim.gs/0f81430f9a408c6cd8b3cc62c94bc4ea.png) no-repeat center;
    background-size: 1.10933333rem .85333333rem
}

.showPhiz,.showGiftLayer {
    width: 16rem;
    margin: 0 auto;
    overflow: hidden
}

.showPhiz .pagination,.showGiftLayer .pagination {
    width: 100%;
    height: .85333333rem;
    line-height: .85333333rem;
    position: absolute;
    bottom: 0;
    text-align: center;
    z-index: 10
}

.showPhiz .pagination .swiper-pagination-bullet,.showGiftLayer .pagination .swiper-pagination-bullet {
    width: .256rem;
    height: .256rem;
    margin: 0 .10666667rem;
    background: #8e8e8e;
    border-radius: .256rem;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.showPhiz .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,.showGiftLayer .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: .256rem;
    background-color: #2b2b2b;
    border-radius: .256rem
}

.showGiftLayer {
    height: auto
}

.showPhiz {
    height: 9.89866667rem
}

.showPhiz .phiz-layer-con {
    height: 7.85066667rem
}

.tips-container {
    position: fixed;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    max-width: 16rem;
    margin-left: -8rem;
    z-index: 9998
}

.tips-container .layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.35)
}

.tips-container .tips-con {
    position: relative;
    background: #fff;
    margin: 0 .896rem;
    margin-top: 5.14133333rem;
    border-radius: .128rem;
    z-index: 4
}

.tips-container .tip-area {
    text-align: center;
    color: #acacac;
    font-size: .68266667rem;
    padding: 1.70666667rem .42666667rem;
    border-bottom: 1px solid #e2e2e2
}

.tips-container .btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: .46933333rem .42666667rem
}

.tips-container .btns a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    color: #cacaca;
    font-size: .68266667rem;
    height: 1.10933333rem;
    line-height: 1.10933333rem;
    display: block;
    border-right: 1px solid #e2e2e2
}

.tips-container .btns a:last-child {
    border-right: 0 none
}

.tips-container .btns .confirm {
    color: #c39
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

#header {
    width: 100%;
    height: 1.75rem;
    line-height: 1.75rem;
    overflow: hidden;
    background: #fff;
    position: relative
}

#header .logo {
    width: 2rem;
    height: 1.2rem;
    position: absolute;
    left: .5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

#header .logo img {
    width: 100%;
    height: 100%;
    display: block
}

#header .btn-download {
    position: absolute;
    width: 3.3rem;
    height: 1.2rem;
    line-height: 1.2rem;
    right: .5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #c39;
    border-radius: 2.5rem;
    color: #fff;
    font-size: .45rem;
    text-align: center
}

.room-gift-animtaion-item {
    background: #fff1c6;
    border: 1px solid #ffd145;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0 .25rem;
    position: relative;
    font-size: .65rem;
    color: #ff9351;
    border-radius: .2rem;
    margin: .5rem .75rem;
    clear: both;
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.room-gift-animtaion-item .gift-img {
    position: relative;
    float: left;
    width: 1.8rem;
    height: 1.8rem;
    left: -.3rem;
    top: -.2rem
}

.room-gift-animtaion-item .gift-img img {
    width: 100%
}

.room-gift-animtaion-item .gift-info {
    float: left;
    height: 1.5rem;
    line-height: 1.5rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

.room-gift-animtaion-item .gift-combo {
    float: left;
    overflow: hidden;
    margin-left: .25rem;
    height: 1.5rem;
    line-height: 1.5rem
}

.room-gift-animtaion-item .gift-combo .combo-symbol {
    float: left
}

.room-gift-animtaion-item .gift-combo .gift-combo-hit {
    float: left;
    padding-left: .15rem;
    font-size: 1.2rem
}

.giftLeave {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: giftLeave 300ms linear both;
    animation: giftLeave 300ms linear both
}

@-webkit-keyframes giftLeave {
    0% {
        left: 0
    }

    to {
        left: 100%
    }
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}